import { createLoading } from '#/Loading';
import type { Directive, App } from 'vue';

const loadingDirective: Directive = {
	mounted(el, binding) {
		const tip = el.getAttribute('loading-tip');
		const background = el.getAttribute('loading-background');
		const size = el.getAttribute('loading-size');
		const fullscreen = !!binding.modifiers.fullscreen;
		const instance = createLoading(
			{
				tip,
				background,
				size: size || 'large',
				loading: !!binding.value,
				absolute: !fullscreen,
			},
			fullscreen ? document.body : el,
		);
		el.instance = instance;
	},
	updated(el, binding) {
		const instance = el.instance;
		if (!instance) return;
		instance.setTip(el.getAttribute('loading-tip'));
		if (binding.oldValue !== binding.value) {
			if (binding.oldValue !== binding.value) {
				instance.setLoading?.(binding.value && !instance.loading);
			}
		}
	},
	unmounted(el) {
		el?.instance?.close();
	},
};

export function setupLoadingDirective(app: App) {
	app.directive('loading', loadingDirective);
}

export default loadingDirective;
